<!--  -->
<template>
	<view class="app-page">
		<image v-if="info.contractState === 0" class="state-img" mode="scaleToFill"
			src="@/static/images/file-state-2.png" />
		<image v-else-if="info.contractState === 1" class="state-img" mode="scaleToFill"
			src="@/static/images/file-state-1.png" />
		<image v-else-if="info.contractState === 2" class="state-img" mode="scaleToFill"
			src="@/static/images/file-state-success.png" />
		<image v-else-if="info.contractState === 3" class="state-img" mode="scaleToFill"
			src="@/static/images/file-state-return.png" />
		<image v-else-if="info.contractState === 4" class="state-img" mode="scaleToFill"
			src="@/static/images/file-state-refuse.png" />
		<image v-else class="state-img" mode="scaleToFill" src="@/static/images/file-state-fail.png" />

		<image v-if="info.contractState == 2" class="clock-img" mode="scaleToFill"
			src="@/static/images/signFile-success.png" />

		<image v-else class="clock-img" mode="widthFix" src="@/static/images/clock.png" />

		<view class="state-txt">
			{{ info.fileStateTitle }}
		</view>
		<view class="state-tip">
			{{
        info && info.contractState < 2
          ? `请于${info.expirationTime}前完成签署借条`
          : ""
      }}
		</view>
		<view :class="
        [
          'user-sign-state',
          (info.contractState === 0 && info.creditorMember) ||
          ((info.contractState == 1 || info.contractState == 2) &&
            info.creditorMemberSignatureId)
            ? 'yes'
            : info.contractState > 2
            ? 'fail'
            : 'no',
        ]
      ">
			出借人（{{
        info.creditorMember
          ? info.creditorMemberName
          : info.contractState <= 2
          ? "待添加"
          : "未添加"
      }}）
			<!--<text >{{info.contractState==0?(info.creditorMember?'已填写':'待填写'):(info.creditorMemberSignatureId?'已签署':'待签署')}}</text> -->
			<text v-if="info.contractState == 0">
				{{ info.creditorMember ? "已填写" : "待填写" }}
			</text>
			<text v-else-if="info.contractState == 1">
				{{ info.creditorMemberSignatureId ? "已签署" : "待签署" }}
			</text>
			<text v-else-if="info.contractState == 2">{{ "已签署" }}</text>
			<text v-else-if="info.contractState >= 3">
				{{
          info.creditorMemberSignatureId
            ? "已签署"
            : info.creditorMember && info.debtorMember
            ? "未签署"
            : info.creditorMember
            ? "已填写"
            : "未填写"
        }}
			</text>
		</view>
		<view :class="
        [
          'user-sign-state',
          (info.contractState === 0 && info.debtorMember) ||
          ((info.contractState == 1 || info.contractState == 2) &&
            info.debtorMemberSignatureId)
            ? 'yes'
            : info.contractState > 2
            ? 'fail'
            : 'no',
        ]
      ">
			借款人（{{
        info.debtorMember
          ? info.debtorMemberName
          : info.contractState <= 2
          ? "待添加"
          : "未添加"
      }}）
			<!--<text>{{info.contractState==0?(info.debtorMember?'已填写':'待填写'):(info.debtorMemberSignatureId?'已签署':'待签署')}}</text> -->
			<text v-if="info.contractState == 0">
				{{ info.debtorMember ? "已填写" : "待填写" }}
			</text>
			<text v-else-if="info.contractState == 1">
				{{ info.debtorMemberSignatureId ? "已签署" : "待签署" }}
			</text>
			<text v-else-if="info.contractState == 2">{{ "已签署" }}</text>
			<text v-else-if="info.contractState >= 3">
				{{
          info.debtorMemberSignatureId
            ? "已签署"
            : info.creditorMember && info.debtorMember
            ? "未签署"
            : info.debtorMember
            ? "已填写"
            : "未填写"
        }}
			</text>
		</view>
		<view :class="['file-state',  info.contractState == 2?'yes':'no']">
			{{ info.fileStateTip }}
		</view>
		<view v-if="info.contractState >= 2" class="btns safe-area">
			<view @click="handleView" type="primary" className="btn cancel">
				查看借条
			</view>
		</view>
		<view v-else-if="info.contractState === 0" class="btns safe-area">
			<view @click="handleBackOrder" className="btn cancel">
				返回借条列表页
			</view>
			<button type="primary" open-type="share" className="btn">发给对方</button>
		</view>
		<view v-else-if="info.contractState === 1" class="btns safe-area">
			<view @click="handleBackOrder" className="btn cancel">
				返回借条列表页
			</view>
			<view v-if="
          (roleType === 0 && !info.creditorMemberSignatureId) ||
          (roleType === 1 && !info.debtorMemberSignatureId)
        " type="primary" @click="handleSign" className="btn">
				签署借条
			</view>
			<button v-else-if="roleType !== 2" type="primary" open-type="share" className="btn">
				发给对方
			</button>
		</view>
	</view>
</template>

<script>
	import {
		apiContractById
	} from "@/api/common";
	import {
		getCardStateTxt
	} from "@/utils/filters";
	import {
		parseTime,
		upload
	} from "@/utils/common";
	import code2Enum from "@/utils/code2Enum";
	export default {
		components: {},
		data() {
			return {
				info: {},
				roleType: 2,
				contractId: ""
			};
		},
		onBackPress() {
			uni.switchTab({
				url: "/pages/home/index",
			});
		},
		onLoad(query) {
			const {
				contractId
			} = query;
			this.contractId = contractId;
			this.getData();
		},
		methods: {
			getData() {
				const {
					contractId
				} = this;
				apiContractById({
						contractId: contractId,
					})
					.then((res) => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.code === 200) {
							res.data = {
								...res.data,
								contractState: code2Enum.contractStateEnum(
									res.data.contractState
								),
								promoterType: code2Enum.promoterTypeEnum(res.data.promoterType),
								contractPayState: code2Enum.contractPayStateEnum(
									res.data.contractPayState
								),
								paymentType: code2Enum.paymentTypeEnum(res.data.paymentType),
								transferStatus: code2Enum.transferStatusEnum(
									res.data.transferStatus
								),
							};
							const {
								creditorMember,
								creditorMemberSignatureId,
								debtorMember,
								debtorMemberSignatureId,
							} = res.data;
							const fileStateObj = this.getFileStateTitle(res.data);
							const {
								memberId
							} = this.$store.state.userInfo;

							this.info = {
								...res.data,
								fileState: getCardStateTxt(res.data),
								debtorUserSignState: debtorMemberSignatureId ?
									"yqs" : debtorMember ?
									"ytx" : "dtx",
								creditorMemberSignState: creditorMemberSignatureId ?
									"yqs" : creditorMember ?
									"ytx" : "dtx",
								fileStateTitle: fileStateObj.title,
								fileStateTip: fileStateObj.tip,
								expirationTime: parseTime(
									res.data.expirationTime,
									"{m}月{d}日 {h}:{i}分"
								),
							};
							this.roleType = memberId === creditorMember ? 0 : memberId === debtorMember ? 1 :
								2; //0 出借 1 借款 3 其他
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
			getFileStateTitle(row) {
				// 0填写中 1签署中 2已生效 3已撤回 4已拒签 5已失效
				const {
					contractState,
					debtorUser,
					creditorMember,
					debtorMemberSignatureId,
					creditorMemberSignatureId,
				} = row;
				const userInfo = this.$store.state.userInfo;
				const ownRoleType = userInfo.memberId === creditorMember ? 0 : 1;
				let title = "";
				let tip = "";
				switch (Number(contractState)) {
					case 0:
						title = "待对方填写借条";
						tip = "借款填写完成";
						break;
					case 1:
						if (ownRoleType === 0) {
							if (creditorMemberSignatureId) {
								title = "待对方签署借条";
								tip = "借条签署完成";
							} else {
								title = "待我签署借条";
								tip = "借款填写完成";
							}
						} else {
							if (debtorMemberSignatureId) {
								title = "待对方签署借条";
								tip = "借条签署完成";
							} else {
								title = "待我签署借条";
								tip = "借款填写完成";
							}
						}
						break;
					case 2:
						title = "借条签署完成并生效";
						tip = "借条签署完成";
						break;
					case 3:
						title = "借条已撤回";
						tip = "借条已撤回";
						break;
					case 4:
						title = "借条已拒签";
						tip = "借条已拒签";
						break;
					case 5:
						title = "借条已失效";
						tip = "借条已失效";
						break;
					default:
						title = "借条签署完成并生效";
						tip = "借条签署完成";
						break;
				}
				return {
					title,
					tip,
				};
			},
			// 返回订单列表
			handleBackOrder() {
				uni.reLaunch({
					url: "/pages/order/index",
				});
			},

			// 查看详情
			handleView() {
				const {
					contractId,
					roleType
				} = this
				uni.navigateTo({
					url: `/pages/orderDetail/orderDetail?contractId=${contractId}`,
				});
			},
			// 签署
			handleSign() {
				const {
					contractId
				} = this
				uni.navigateTo({
					url: `/pages/borrowFile/borrowFile?contractId=${contractId}`,
				});
			},
		},
		onPullDownRefresh() {
			uni.showLoading();
			this.getData();
		},
		onShareAppMessage() {
			// 返回自定义分享信息
			const {
				contractId,
				roleType
			} = this;

			return new Promise((resolve, reject) => {
				apiContractById({
					contractId: contractId,
				}).then((res) => {
					if (res.code === 200) {
						res.data = {
							...res.data,
							contractState: code2Enum.contractStateEnum(res.data.contractState),
							promoterType: code2Enum.promoterTypeEnum(res.data.promoterType),
							contractPayState: code2Enum.contractPayStateEnum(
								res.data.contractPayState
							),
							paymentType: code2Enum.paymentTypeEnum(res.data.paymentType),
							transferStatus: code2Enum.transferStatusEnum(
								res.data.transferStatus
							),
						};
						const {
							contractState
						} = res.data;
						if (roleType === 2) {
							//第三方
							resolve({
								title: "签鸽小程序",
								desc: "借条签署一站式 财产安全有保障",
								path: `pages/home/index`,
								bgImgUrl: "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",
							});
						} else {
							// 合同未生效
							if (contractState === 0 || contractState === 1) {
								resolve({
									title: "签鸽小程序",
									desc: "邀请您签署借条",
									bgImgUrl: "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",

									path: `pages/pleaseSign/pleaseSign?contractId=${contractId}`,
								});
							} else {
								// 合同生效  分享预览同第三方
								resolve({
									title: "签鸽小程序",
									desc: "邀请您签署借条",
									bgImgUrl: "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",
									path: `pages/borrowFile/borrowFile?contractId=${contractId}&roleType=2&mode=second`,
								});
							}
						}
					}
				});
			});
		},
	};
</script>
<style lang="scss" scoped>
	.app-page {
		width: 750rpx;
		height: 100vh;
		overflow-y: auto;
		background: linear-gradient(180deg, #94cefd 0%, #cae7ff 46%, #eef7ff 100%);
		box-sizing: border-box;
		padding-bottom: 223rpx;
	}

	.state-img {
		width: 590rpx;
		height: 123rpx;
		margin: 224rpx 80rpx 0;
	}

	.clock-img {
		width: 180rpx;
		height: 180rpx;
		margin-top: 127rpx;
		margin: 127rpx 285rpx 0;
	}

	.state-txt {
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC, PingFang SC;
		color: #333333;
		font-weight: bold;
		line-height: 50rpx;
		margin-top: 48rpx;
		text-align: center;
	}

	.state-tip {
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		color: #999999;
		line-height: 37rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-bottom: 62rpx;
	}

	.user-sign-state {
		width: 560rpx;
		height: 80rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		color: #333333;
		line-height: 80rpx;
		background: #ffffff;
		border-radius: 50rpx;
		padding-left: 85rpx;
		box-sizing: border-box;
		margin-bottom: 48rpx;
	}

	.user-sign-state.no {
		position: relative;
	}

	.user-sign-state.no::before {
		width: 24rpx;
		height: 24rpx;
		background: #ff3141;
		content: "";
		border-radius: 50%;
		position: absolute;
		left: 37rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.user-sign-state.fail {
		position: relative;
	}

	.user-sign-state.fail::before {
		width: 24rpx;
		height: 24rpx;
		background: #ccc;
		content: "";
		border-radius: 50%;
		position: absolute;
		left: 37rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.user-sign-state text {
		height: 37rpx;
		line-height: 37rpx;
		font-weight: bold;
		content: "待填写";
		position: absolute;
		right: 60rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.no text {
		color: #ff3141;
	}

	.yes text {
		color: #1677ff;
	}

	.fail text {
		color: #ccc;
	}

	.user-sign-state {
		width: 560rpx;
		height: 80rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		color: #333333;
		line-height: 80rpx;
		background: #ffffff;
		border-radius: 50rpx;
		padding-left: 85rpx;
		box-sizing: border-box;
		margin: 0 auto 48rpx;
	}

	.user-sign-state.yes {
		position: relative;
	}

	.user-sign-state.yes::before {
		width: 24rpx;
		height: 24rpx;
		background: #1677ff;
		content: "";
		border-radius: 50%;
		position: absolute;
		left: 37rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.file-state {
		width: 560rpx;
		height: 80rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		line-height: 80rpx;
		background: #ffffff;
		border-radius: 50rpx;
		text-align: center;
		box-sizing: border-box;
		position: relative;
		margin: auto;
	}

	.file-state.no {
		color: #cccccc;
	}

	.file-state.no::before {
		width: 28rpx;
		height: 28rpx;
		content: "";
		border-radius: 50%;
		background-image: url(@/static/images/file-error.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		left: 37rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.file-state.yes {
		color: #3dcfa4;
	}

	.file-state.yes::before {
		width: 28rpx;
		height: 28rpx;
		content: "";
		border-radius: 50%;
		background-image: url(@/static/images/file-success.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		left: 37rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.btns {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		margin-bottom: 24rpx;
	}

	.btn {
		flex: 1;
		font-family: PingFangSC, PingFang SC;
		margin-right: 24rpx;
	}

	.btn:last-child {
		margin-right: 0;
	}
</style>